<script setup>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'

const input = ref('')
const activeIndex = ref('1')
 const handleSelect = (key, keyPath) => {

  console.log(key, keyPath)
}
</script>



<template>

  <el-menu

      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      @select="handleSelect"
  >
<div class="logo"
>
      <img src="@/assets/微信图片_20241023174228.jpg" alt="Element logo">
    </div>
    <div class="flex-grow"
    />
    <el-menu-item index="3">首页</el-menu-item>
    <el-menu-item index="1">店铺信息</el-menu-item>
    <el-input
        v-model="input3"
        style="max-width: 600px"
        placeholder="请输入内容"
        class="input-with-select"
    >   <template #append>
      <el-button :icon="Search" />
    </template>
    </el-input>
    <el-sub-menu index="2">
      <template #title>个人中心</template>
      <el-menu-item index="2-1">item one</el-menu-item>
      <el-menu-item index="2-2">item two</el-menu-item>
      <el-menu-item index="2-3">item three</el-menu-item>
      <el-sub-menu index="2-4">
        <template #title>item four</template>
        <el-menu-item index="2-4-1">item one</el-menu-item>
        <el-menu-item index="2-4-2">item two</el-menu-item>
        <el-menu-item index="2-4-3">item three</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>

  </el-menu>

</template>

<style scoped>

.el-menu-demo {
  position: fixed;
  top: 0px;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  width: 1920px; /* 使菜单宽度为100% */
  height: 70px;
  max-width: 100vw;/*  使最大宽度为视口宽度 */
  box-sizing: border-box; /* 包括内边距和边框在内 */
  z-index: 10; /* 确保导航栏在上层 */

  padding-bottom: 0px;
}
.logo img{
  width: 200px;
  height: 70px;
}
</style>